<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="nav-bar">
				<view class="nav-left" @click="goBack">
					<view class="back-arrow"></view>
				</view>
				<view class="nav-title">汽车保养</view>
				<view class="nav-right">
					<view class="nav-icon-dot"></view>
					<view class="nav-icon-line"></view>
					<view class="nav-icon-circle"></view>
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content">
			<!-- 白色卡片容器 -->
			<view class="card-container">
				<!-- 地图区域 -->
				<view class="map-wrapper">
					<map class="map" :latitude="mapCenter.latitude" :longitude="mapCenter.longitude" :markers="markers"
						:scale="13" show-location></map>
					<!-- 附近门店按钮 -->
					<view class="nearby-stores-btn" @click="showNearbyStores">
						<text class="nearby-stores-text">附近门店 ></text>
					</view>
				</view>

				<!-- 门店详情区域 -->
				<view class="store-details">
					<view class="store-header">
						<!-- 左侧信息区域 -->
						<view class="store-info-left">
							<!-- 第一行：门店名称和评分 -->
							<view class="store-name-row">
								<text class="store-name">{{ storeInfo.name }}</text>
								<view class="store-rating">
									<view class="stars">
										<image v-for="(star, index) in 5" :key="index" 
											:src="index < storeInfo.rating ? '/static/image/carmaintenance/五星 拷贝@3x.png' : '/static/image/carmaintenance/五星 拷贝.png'"
											class="star-icon"></image>
									</view>
									<text class="rating-text">{{ storeInfo.rating }}分</text>
								</view>
							</view>

							<!-- 营业时间 -->
							<view class="store-info-row">
								<text class="info-label">营业时间:</text>
								<text class="info-value">{{ storeInfo.businessTime }}</text>
							</view>

							<!-- 位置 -->
							<view class="store-info-row">
								<text class="info-label">位置:</text>
								<text class="info-value">{{ storeInfo.address }}</text>
							</view>
						</view>

						<!-- 右侧：距离和图片 -->
						<view class="store-right">
							<text class="store-distance">{{ storeInfo.distance }}</text>
							<view class="store-image-wrapper">
								<image class="store-image" :src="storeInfo.image" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>

				<!-- 底部操作按钮 -->
				<view class="action-buttons">
					<view class="action-btn contact-btn" @click="contactStore">
						<image class="btn-icon" src="/static/image/carmaintenance/电话@3x.png" mode="aspectFit"></image>
						<text class="btn-text">联系门店</text>
					</view>
					<view class="action-btn book-btn" @click="bookNow">
						<image class="btn-icon" src="/static/image/carmaintenance/预约@3x.png" mode="aspectFit"></image>
						<text class="btn-text">立即预定</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 电话拨号弹窗 -->
		<view class="phone-modal" v-if="showPhoneModal" @click="closePhoneModal">
			<view class="phone-modal-content" @click.stop>
				<!-- 电话号码 -->
				<view class="phone-number" @click="fakeCall">
					{{ storeInfo.phone }}
				</view>
				
				<!-- 复制按钮 -->
				<view class="copy-btn" @click="copyPhoneNumber">
					复制
				</view>
				
				<!-- 取消拨号按钮 -->
				<view class="cancel-btn" @click="closePhoneModal">
					取消拨号
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 地图中心点（焦作市中心）
	const mapCenter = ref({
		latitude: 35.2236,
		longitude: 113.2925
	});

	// 地图标记点
	const markers = ref([{
			id: 1,
			latitude: 35.2236,
			longitude: 113.2925,
			iconPath: '/static/image/定位2.png',
			width: 30,
			height: 30,
			callout: {
				content: '车百事汽车生活馆',
				display: 'ALWAYS',
				fontSize: 12,
				borderRadius: 5,
				padding: 5,
				color: '#333',
				bgColor: '#fff'
			}
		},
		{
			id: 2,
			latitude: 35.2156,
			longitude: 113.2845,
			iconPath: '/static/image/carmaintenance/位置 拷贝 8@3x.png',
			width: 30,
			height: 30
		},
		{
			id: 3,
			latitude: 35.2286,
			longitude: 113.3005,
			iconPath: '/static/image/carmaintenance/位置 拷贝 8@3x.png',
			width: 30,
			height: 30
		}
	]);

	// 门店信息
	const storeInfo = ref({
		name: '车百事汽车生活馆',
		rating: 4,
		distance: '556m',
		businessTime: '周一至周五 早上8:00-晚上22:00',
		address: '山阳区人民路与解放路交叉口',
		image: '/static/image/图层 1@2x.png',
		phone: '18642589456'
	});

	// 控制电话弹窗显示
	const showPhoneModal = ref(false);

	// 显示附近门店
	const showNearbyStores = () => {
		uni.navigateTo({
			url: '/pages/index/carMaintenance/nearbyShops'
		});
	};

	// 联系门店 - 显示电话弹窗
	const contactStore = () => {
		showPhoneModal.value = true;
	};

	// 关闭电话弹窗
	const closePhoneModal = () => {
		showPhoneModal.value = false;
	};

	// 复制电话号码
	const copyPhoneNumber = () => {
		uni.setClipboardData({
			data: storeInfo.value.phone,
			success: () => {
				uni.showToast({
					title: '已复制到剪贴板',
					icon: 'success',
					duration: 2000
				});
				// 复制后可以选择关闭弹窗
				setTimeout(() => {
					closePhoneModal();
				}, 500);
			},
			fail: () => {
				uni.showToast({
					title: '复制失败',
					icon: 'none'
				});
			}
		});
	};

	// 假呼叫（模拟拨号）
	const fakeCall = () => {
		uni.showToast({
			title: '正在呼叫 ' + storeInfo.value.phone,
			icon: 'none',
			duration: 2000
		});
		// 模拟呼叫效果，2秒后关闭弹窗
		setTimeout(() => {
			closePhoneModal();
			uni.showToast({
				title: '呼叫已结束',
				icon: 'none',
				duration: 1500
			});
		}, 2000);
	};

	// 立即预定
	const bookNow = () => {
		uni.showToast({
			title: '立即预定',
			icon: 'none'
		});
	};

	// 返回
	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	/* 顶部导航栏 */
	.header {
		background: linear-gradient(180deg, #2477F4 0%, #166BEC 100%);
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		padding-top: calc(20rpx + env(safe-area-inset-top));
	}

	.nav-left {
		width: 80rpx;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.back-arrow {
		width: 24rpx;
		height: 24rpx;
		border-left: 4rpx solid #fff;
		border-bottom: 4rpx solid #fff;
		transform: rotate(45deg);
		margin-left: 10rpx;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}

	.nav-right {
		width: 80rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 8rpx;
	}

	.nav-icon-dot {
		width: 8rpx;
		height: 8rpx;
		background: #fff;
		border-radius: 50%;
	}

	.nav-icon-line {
		width: 2rpx;
		height: 24rpx;
		background: #fff;
		margin: 0 4rpx;
	}

	.nav-icon-circle {
		width: 24rpx;
		height: 24rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
		position: relative;
	}

	.nav-icon-circle::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 8rpx;
		height: 8rpx;
		background: #fff;
		border-radius: 50%;
	}

	/* 内容区域 */
	.content {
		flex: 1;
		padding: 30rpx;
		margin-top: -30rpx;
		overflow-y: auto;
	}

	/* 卡片容器 */
	.card-container {
		width: 100%;
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
		padding: 20rpx;
		box-sizing: border-box;
	}

	/* 地图区域 */
	.map-wrapper {
		width: 100%;
		height: 600rpx;
		position: relative;
		border-radius: 12rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.map {
		width: 100%;
		height: 100%;
	}

	/* 附近门店按钮 */
	.nearby-stores-btn {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		background: rgba(255, 107, 53, 0.9);
		border-radius: 40rpx;
		padding: 12rpx 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
	}

	.nearby-stores-text {
		color: #fff;
		font-size: 28rpx;
		font-weight: 500;
	}

	/* 门店详情 */
	.store-details {
		padding: 0 0 30rpx 0;
	}

	.store-header {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		position: relative;
	}

	.store-info-left {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		padding-right: 20rpx;
	}

	.store-name-row {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-bottom: 20rpx;
		gap: 10rpx;
		position: relative;
		min-height: 50rpx;
	}

	.store-name {
		font-size: 36rpx;
		font-weight: 700;
		color: #000;
		margin-right: 10rpx;
		line-height: 1.2;
	}

	.store-rating {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.stars {
		display: flex;
		align-items: center;
		gap: 4rpx;
	}

	.star-icon {
		width: 28rpx;
		height: 28rpx;
	}

	.rating-text {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}

	.store-info-row {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		line-height: 1.5;
		white-space: nowrap;
		overflow: hidden;
		min-height: 42rpx;
	}

	.info-label {
		font-size: 28rpx;
		color: #666;
		flex-shrink: 0;
		margin-right: 10rpx;
		white-space: nowrap;
	}

	.info-value {
		font-size: 28rpx;
		color: #333;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 右侧区域：距离和图片 */
	.store-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: flex-start;
		flex-shrink: 0;
		width: 240rpx;
		position: relative;
		margin-left: 20rpx;
	}

	.store-distance {
		font-size: 28rpx;
		color: #2477F4;
		font-weight: 500;
		line-height: 1;
		white-space: nowrap;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 0;
	}

	.store-image-wrapper {
		width: 240rpx;
		height: 180rpx;
		border-radius: 12rpx;
		overflow: hidden;
		flex-shrink: 0;
		display: flex;
		align-items: stretch;
		margin-top: 20rpx;
	}

	.store-image {
		width: 100%;
		height: 100%;
		display: block;
		object-fit: cover;
	}

	/* 底部操作按钮 */
	.action-buttons {
		display: flex;
		gap: 20rpx;
		margin-top: 30rpx;
		padding-top: 30rpx;
		border-top: 1rpx solid #f0f0f0;
	}

	.action-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12rpx;
		font-size: 32rpx;
		font-weight: 500;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}

	.contact-btn {
		background: linear-gradient(135deg, #2477F4 0%, #166BEC 100%);
		color: #fff;
	}

	.book-btn {
		background: linear-gradient(135deg, #FF6B35 0%, #FF8C5A 100%);
		color: #fff;
	}

	.btn-icon {
		width: 36rpx;
		height: 36rpx;
	}

	.btn-text {
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
	}

	/* 电话拨号弹窗 */
	.phone-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: flex-end;
		justify-content: center;
		z-index: 1000;
		animation: fadeIn 0.3s ease;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.phone-modal-content {
		width: 100%;
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		padding: 60rpx 40rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40rpx;
		animation: slideUp 0.3s ease;
	}

	@keyframes slideUp {
		from {
			transform: translateY(100%);
		}
		to {
			transform: translateY(0);
		}
	}

	.phone-number {
		font-size: 48rpx;
		font-weight: 600;
		color: #000;
		text-align: center;
		padding: 20rpx 0;
		cursor: pointer;
		user-select: none;
	}

	.copy-btn {
		width: 100%;
		height: 88rpx;
		background: #f5f5f5;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		cursor: pointer;
		transition: background 0.2s;
	}

	.copy-btn:active {
		background: #e0e0e0;
	}

	.cancel-btn {
		width: 100%;
		height: 88rpx;
		background: #f5f5f5;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		cursor: pointer;
		transition: background 0.2s;
	}

	.cancel-btn:active {
		background: #e0e0e0;
	}
</style>
